import 'package:flutter/material.dart';
import 'package:gw_github_flutter/common/route_name.dart';
import 'package:gw_github_flutter/route/systemWidget/textField/gwConfirmPassWordValidationTextFromField.dart';
import 'package:gw_github_flutter/route/systemWidget/textField/gwPassWordValidationTextFiled.dart';
import 'package:gw_github_flutter/route/systemWidget/textField/gwValidation_textformfield.dart';

class TextFieldRoute extends StatefulWidget {
  TextFieldRoute({Key? key}) : super(key: key);

  @override
  State<TextFieldRoute> createState() => _TextFieldRouteState();
}

class _TextFieldRouteState extends State<TextFieldRoute> {
  List<String> _colors = <String>['', 'red', 'green', 'blue', 'orange'];
  String _color = '';

  UnderlineInputBorder lineBorder = UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.black, width: 1.0));
  OutlineInputBorder outLineBorder = OutlineInputBorder(
      borderSide: BorderSide(color: Colors.black, width: 1.0),
      borderRadius: BorderRadius.circular(10));

  Color cursorColor = Colors.black;

  FocusNode testNode_account5 = FocusNode();
  FocusNode testNode_password6 = FocusNode();
  TextEditingController textVC_password6 = TextEditingController();

  TextEditingController textVC_email = TextEditingController();
  TextEditingController textVC_password = TextEditingController();
  TextEditingController textVC_confirmPassWord = TextEditingController();

  UnderlineInputBorder accountChangeLineBorder() {
    return UnderlineInputBorder(
        borderSide: BorderSide(color: changeAccountColor, width: 1.0));
  }

  UnderlineInputBorder passwordChangeLineBorder() {
    return UnderlineInputBorder(
        borderSide: BorderSide(color: changePasswordColor(), width: 1.0));
  }

  Color get changeAccountColor {
    return testNode_account5.hasFocus
        ? Color.fromARGB(255, 71, 81, 3)
        : Colors.lightGreen;
  }

  Color changePasswordColor() {
    return testNode_password6.hasFocus ? Colors.green : Colors.orange;
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    testNode_password6.dispose();
    testNode_account5.dispose();
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    testNode_password6.addListener(() {
      setState(() {
        changePasswordColor();
      });
    });
    testNode_account5.addListener(() {
      setState(() {
        changeAccountColor;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text(RouteName.textFieldRoute)),
        body: GestureDetector(
          onTap: () {
            FocusScope.of(context).requestFocus(FocusNode());
          },
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: SingleChildScrollView(
              child: Column(
                children: [
                  TextField(
                      cursorColor: cursorColor,
                      showCursor: true,
                      decoration: InputDecoration(
                        labelText: "account1",
                        hintText: "account1",
                        prefixIcon: const Icon(Icons.account_box),
                        border: lineBorder,
                        enabledBorder: lineBorder,
                        focusedBorder: lineBorder,
                        errorBorder: lineBorder,
                      )),
                  Container(
                    decoration: const BoxDecoration(
                        border: Border(
                            bottom:
                                BorderSide(color: Colors.black, width: 1.0))),
                    child: TextField(
                      cursorColor: cursorColor,
                      showCursor: true,
                      decoration: const InputDecoration(
                          labelText: "account2",
                          hintText: "account2",
                          prefixIcon: Icon(Icons.account_box),
                          border: InputBorder.none),
                    ),
                  ),
                  Form(
                      autovalidateMode: AutovalidateMode.onUserInteraction,
                      child: Column(
                        children: [
                          TextFormField(
                            cursorColor: cursorColor,
                            decoration: InputDecoration(
                                labelText: "account3",
                                hintText: "account3",
                                prefixIcon: Icon(Icons.person),
                                border: lineBorder,
                                enabledBorder: lineBorder,
                                focusedBorder: lineBorder,
                                errorBorder: lineBorder,
                                disabledBorder: lineBorder),
                            validator: (value) {
                              return value?.trim().isNotEmpty == true
                                  ? null
                                  : "用户名不能为空";
                            },
                          ),
                          TextFormField(
                            cursorColor: cursorColor,
                            decoration: InputDecoration(
                                labelText: "password4",
                                hintText: "password4",
                                hintStyle: TextStyle(color: changeAccountColor),
                                prefixIcon: Icon(Icons.lock),
                                border: outLineBorder,
                                enabledBorder: outLineBorder,
                                focusedBorder: outLineBorder,
                                errorBorder: outLineBorder,
                                disabledBorder: outLineBorder),
                            validator: (value) {
                              return (value ?? "").trim().length > 5
                                  ? null
                                  : "密码不能少于6位";
                            },
                          ),
                          TextFormField(
                            cursorColor: cursorColor,
                            focusNode: testNode_account5,
                            decoration: InputDecoration(
                              hintText: "account5",
                              hintStyle: TextStyle(color: changeAccountColor),
                              prefixIcon: Icon(
                                Icons.person,
                                color: changeAccountColor,
                              ),
                              // border: accountChangeLineBorder(),
                              enabledBorder: accountChangeLineBorder(),
                              focusedBorder: accountChangeLineBorder(),
                              // errorBorder: accountChangeLineBorder(),
                              // disabledBorder: accountChangeLineBorder()
                            ),
                          ),
                          TextFormField(
                            controller: textVC_password6,
                            focusNode: testNode_password6,
                            cursorColor: cursorColor,
                            decoration: InputDecoration(
                              hintText: "password6",
                              hintStyle:
                                  TextStyle(color: changePasswordColor()),
                              prefixIcon: Icon(
                                Icons.lock,
                                color: changePasswordColor(),
                              ),
                              // border: passwordChangeLineBorder(),
                              enabledBorder: passwordChangeLineBorder(),
                              focusedBorder: passwordChangeLineBorder(),
                              // errorBorder: passwordChangeLineBorder(),
                              // disabledBorder: passwordChangeLineBorder(),
                            ),
                          ),
                        ],
                      )),
                  const SizedBox(
                    height: 10,
                  ),
                  emailTF(),
                  _passWordTF(),
                  _confirmPassWordTF(),
                  _inputTF()
                ],
              ),
            ),
          ),
        ));
  }

  Widget emailTF() {
    return GwEmailValidationTextField(
      focusNode: testNode_account5,
      whenTextFieldEmpty: "Please enter email",
      validatorMassage: "Please enter valid email",
      decoration: InputDecoration(
        hintText: "Email7",
        hintStyle: TextStyle(color: changeAccountColor),
        counterText: '',
      ),
      textEditingController: textVC_email,
    );
  }

  Widget _passWordTF() {
    return GwPassWordValidationTextField(
      lineIndicator: false,
      passwordMinError: "Must be more than 5 charater",
      hasPasswordEmpty: "Password is Empty",
      passwordMaxError: "Password to long",
      passWordUpperCaseError: "at least one Uppercase (Capital)lette",
      passWordDigitsCaseError: "at least one digit",
      passwordLowercaseError: "at least one lowercase character",
      passWordSpecialCharacters: "at least one Special Characters",
      obscureText: true,
      scrollPadding: const EdgeInsets.only(left: 60),
      decoration: const InputDecoration(
        hintText: "输入密码8",
        counterText: '',
      ),
      onChanged: (value) {
        // print(value);
      },
      passTextEditingController: textVC_password,
      passwordMaxLength: 10,
      passwordMinLength: 5,
    );
  }

  Widget _confirmPassWordTF() {
    return GwConfirmPassWordValidationTextFromField(
      obscureText: true,
      scrollPadding: EdgeInsets.only(left: 60),
      decoration: const InputDecoration(
        hintText: "再次输入密码9",
        counterText: '',
      ),
      onChanged: (value) {
// print(value);
      },
      whenTextFieldEmpty: "Empty",
      validatorMassage: "Password not Match",
      confirmtextEditingController: textVC_confirmPassWord,
    );
  }

  Widget _inputTF() {
    return InputDecorator(
      decoration: const InputDecoration(
        icon: const Icon(Icons.color_lens),
        labelText: 'Color',
      ),
      isEmpty: _color == '',
      child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: _color,
          isDense: true,
          onChanged: (newValue) {
            setState(() {
              _color = newValue ?? "";
            });
          },
          items: _colors
              .map(
                (value) => DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                ),
              )
              .toList(),
        ),
      ),
    );
  }
}
